import './App.css';
import React from 'react'
// import PropsTyepsDemo from "./components/PropsTyepsDemo"
// import EventPrams from './components/EventParams';
// import FuncCompoent from './components/funcComponent';

import SlotDemo from './components/SlotDemo.jsx'
import LeftLayer from './components/child/LeftLayer';
import RightLayer from './components/child/RightLayer';
import FormDemo from './components/FormDemo';
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 1,
      title: true
    }
    this.modifyCount = this.modifyCount.bind(this)
    console.log("1 constructor");
  }

  modifyCount(value) {
    this.setState({
      count: this.state.count + value
    })
  }
  render() {
    console.log("2. render");
    return (

      <div>
        <h1>count: {this.state.count}</h1>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>+1</button>
        <hr />
        {/* <PropsTyepsDemo {...this.state} /> */}
        {/* <PropsTyepsDemo />

        <EventPrams />
        <FuncCompoent {...this.state}></FuncCompoent> */}
        {/* 当props传的是组件时，就当是Slot插槽的使用了。 */}
        <SlotDemo left={<LeftLayer />} right={<RightLayer />} count={this.state.count} currentEditEvent={this.modifyCount}>
          <h1>子组件的标题-默认插槽</h1>
        </SlotDemo>

        <hr />
        <FormDemo></FormDemo>
      </div>
    )
  }
}

export default App;
